<!-- 右侧的管理列表 角色管理 设备管理 用户管理 收费管理 反馈处理 订单管理  -->

<template>
  <aside class="site-sidebar" :class="'site-sidebar--' + sidebarLayoutSkin">
    <div class="site-sidebar__inner">
      <el-menu
        :default-active="menuActiveName || ''"
        :collapse="sidebarFold"
        :collapseTransition="false"
        :unique-opened="true"
        class="site-sidebar__menu colorFff"
      >
        <sub-menu
          v-for="menu in menuList"
          :key="menu.menuId"
          :menu="menu"
          :dynamicMenuRoutes="dynamicMenuRoutes"
        >
        </sub-menu>
      </el-menu>
    </div>
  </aside>
</template>

<script>
import SubMenu from "./main-sidebar-sub-menu";
import { isURL } from "@/utils/validate";

export default {
  data() {
    return {
      // dynamicMenuRoutes: [],
    };
  },
  components: {
    SubMenu,
  },
  computed: {
    sidebarLayoutSkin: {
      get() {
        return this.$store.state.common.sidebarLayoutSkin;
      },
    },
    sidebarFold: {
      get() {
        return this.$store.state.common.sidebarFold;
      },
    },
    menuList: {
      get() {
        return this.$store.state.common.menuList;
      },
      set(val) {
        this.$store.commit("common/updateMenuList", val);
      },
    },
    dynamicMenuRoutes: {
      get() {
        return this.$store.state.common.dynamicMenuRoutes;
      },
      set(val) {
        this.$store.commit("common/updateDynamicMenuRoutes", val);
      },
    },
    menuActiveName: {
      get() {
        return this.$store.state.common.menuActiveName;
      },
      set(val) {
        this.$store.commit("common/updateMenuActiveName", val);
      },
    },
    mainTabs: {
      get() {
        return this.$store.state.common.mainTabs;
      },
      set(val) {
        this.$store.commit("common/updateMainTabs", val);
      },
    },
    mainTabsActiveName: {
      get() {
        return this.$store.state.common.mainTabsActiveName;
      },
      set(val) {
        this.$store.commit("common/updateMainTabsActiveName", val);
      },
    },
  },
  watch: {
    $route: "routeHandle",
  },
  created() {
    let menuList = JSON.parse(sessionStorage.getItem("menuList") || "[]");
    this.filterRouter(menuList);
    this.menuList = menuList;
    let dynamicMenuRoutes = JSON.parse(
      sessionStorage.getItem("dynamicMenuRoutes") || "[]"
    );
    this.dynamicMenuRoutes = dynamicMenuRoutes;
    this.routeHandle(this.$route);
  },
  methods: {
    //路由递归
    filterRouter(menuList = []) {
      menuList.forEach((item, idx) => {
        if (item.list) {
          this.filterRouter(menuList[idx].list);
        } else {
          item.list = [];
        }
      });
    },
    // 路由操作
    routeHandle(route) {
      if (route.meta.isTab) {
        // tab选中, 不存在先添加
        var tab = this.mainTabs.filter((item) => item.name === route.name)[0];
        if (!tab) {
          if (route.meta.isDynamic) {
            route = this.dynamicMenuRoutes.filter(
              (item) => item.name === route.name
            )[0];
            if (!route) {
              return console.error("未能找到可用标签页!");
            }
          }
          tab = {
            menuId: route.meta.menuId || route.name,
            name: route.name,
            title: route.meta.title,
            type: isURL(route.meta.iframeUrl) ? "iframe" : "module",
            iframeUrl: route.meta.iframeUrl || "",
            params: route.params,
            query: route.query,
          };
          this.mainTabs = this.mainTabs.concat(tab);
        }
        this.menuActiveName = tab.menuId + "";
        this.mainTabsActiveName = tab.name;
      }
    },
  },
};
</script>

<style></style>
